<!--
 * @author: Spring
 * @create: 2021-06-29 09:47 AM
 * @license: MIT
 * @lastAuthor: Spring
 * @lastEditTime: 2021-06-29 17:29 PM
 * @desc: 
-->
<template>
  <div class="containerss">
    <div id="editor-trigger" ref="box"></div>
    <input style="opacity: 0" type="file" @change="fileupdate($event)" />
    
  </div>
</template>

<script>
import WangEditor from "wangeditor";
import axios from "axios";
export default {
  data() {
    return {
      editorContent: "",
    };
  },
  components: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var self = this;
      // 创建编辑器
      var editor = new WangEditor("editor-trigger");
      editor.config.menus = [
        'source',
        '|',
        'bold',
        'underline',
        'italic',
        'strikethrough',
        'eraser',
        'forecolor',
        'bgcolor',
        "hr",
        '|',
        'quote',
        'fontfamily',
        'fontsize',
        'head',
        'unorderlist',
        'orderlist',
        'alignleft',
        'aligncenter',
        'alignright',
        '|',
        'link',
        'unlink',
        'table',
        'emotion',
        '|',
        'location',
        'insertcode',
        '|',
        // 'undo',
        // 'redo',
        // 'fullscreen'
      ];
      editor.config.uploadImgUrl = "http://api_devss.wanxikeji.cn/api/savePic";
      editor.config.uploadImgFileName = "img";
      editor.onchange = function () {
        // onchange 事件中更新数据
        self.editorContent = editor.$txt.html();
        self.editorchange()
        console.log(self.editorContent);
      };
      editor.create();
    },
    fileupdate(e) {
      let fm = new FormData();
      let file = e.target.files[0];
      fm.append("img", file);
      axios.post("http://api_devss.wanxikeji.cn/api/savePic", fm, {
        Headers: { "content-type": "multipart/form-data" },
      }).then(res=>{
        console.log(res);
        let pic=res.data.data
        this.$refs.box.innerHTML+=`<img src="${this.$image(pic)}" alt="">`
      });
    },
    editorchange(){
      this.$emit('geteditor',this.editorContent)
    }
  },
};
</script>

<style  lang="scss">
  .containerss{
    width: 50%;
  }
  #editor-trigger{
    width: 100% !important;
    height: 400px !important;
    max-height: 500px;
  }
.w-e-menu {
  z-index: 2 !important;
}
.w-e-text-container {
  z-index: 1 !important;
}
</style>

